<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
        <!--<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css" />-->
        <!-- <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css" />-->
        <link rel="stylesheet" href="css/index.css" />
         
		<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <div data-role="page"  class="message"  id="pageone" data-transition="slide" data-direction="reverse">
            
            <div data-role="panel" class="message" id="revealPanel" data-display="reveal">
                <p>已打卡127天</p>
                <a href="#"><img src="images/zzu.png">Frank</a><br>
                <span>☆☆☆☆☆</span><br>
                <span>编辑个性签名...</span>
                <div>
                    <ul data-role="listview">
                        <li><a href="mine.html" target="_top">我的信息</a></li>
                        <li><a href="#">我的评论</a></li>
                        <li><a href="#">我的收藏</a></li>
                        <li><a href="#">我的相册</a></li>
                         
                       
                    </ul>
                </div>
            </div>

            <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right">
                <h2>超级爬虫，搜你想要</h2>
                <form class="ui-filterable">
                    <input id="myFilter" data-type="search" placeholder="根据名称搜索..">
                </form>
                <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
                    <li>
                        <a href="#">Frank</a>
                    </li>
                    <li>
                        <a href="#">李四</a>
                    </li>
                    <li>
                        <a href="#">Albert</a>
                    </li>
                    <li>
                        <a href="#">Billy</a>
                    </li>
                    <li>
                        <a href="#">Bob</a>
                    </li>
                    <li>
                        <a href="#">Calvin</a>
                    </li>
                    <li>
                        <a href="#">Cameron</a>
                    </li>
                    <li>
                        <a href="#">Chloe</a>
                    </li>
                    <li>
                        <a href="#">Christina</a>
                    </li>
                    <li>
                        <a href="#">Diana</a>
                    </li>
                    <li>
                        <a href="#">Gabriel</a>
                    </li>
                    <li>
                        <a href="#">Glen</a>
                    </li>
                    <li>
                        <a href="#">zookeeper8464</a>
                    </li>
                    <li>
                        <a href="mine.html" target="_top">未闻花名</a>
                    </li>
                </ul>
            </div>
            
           <div data-role="header">
                 <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>  
                 <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
                <p align="center">消息</p>
           </div>
           <div data-role="main" class="ui-content">
                
                <a href="#overlayPanel" class="ui-btn">搜索</a>
                
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="images/zzu.png">Frank(点击跳转页面)</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/home.png">李四</a>
                    </li>
                    <li>
                        <a href="#"><img src="images/zzu.png">王二</a>
                    </li>
                    <li id="listview1">
                        <a href="#"><img src="images/home.png">张五(向左滑动切换页面)</a>
                    </li>
                </ul>
           </div>
           <div id="footer" data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="#" data-icon="comment" onclick="goTo('easy.html')"> 小黑书</a>
                        </li>
                        <li>
                            <a href="user.html" data-icon="user" onclick="goTo('content1.html')"> 好友</a>
                        </li>
                        <li>
                            <a href="#" data-icon="star" onclick="goTo('user.html')">动态</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
      
        <div data-role="page" id="pagetwo" data-theme="b">
             <div data-role="header" data-position="fixed" data-fullscreen="true" >
                <h1>欢迎来到我的主页</h1>
             </div>
          <div data-role="main" class="ui-content" >
            <a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a>
          
           <div data-role="collapsibleset">
              <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
                      <h1>特别关心</h1>
                     <ul data-role="listview">
                      <li><a href="#">Frank</a></li>
                      <li><a href="#">李四</a></li>
                      <li><a href="#">王二</a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
                      <h1>分组一</h1>
                     <ul data-role="listview">
                      <li><a href="#">Frank</a></li>
                      <li><a href="#">李四</a></li>
                      <li><a href="#">王二</a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true">
                      <h1>分组二</h1>
                     <ul data-role="listview">
                      <li><a href="#">Frank</a></li>
                      <li><a href="#">李四</a></li>
                      <li><a href="#">王二</a></li>
                    </ul>
                </div>
            </div>
        </div>
              
          <div data-role="footer" data-position="fixed" data-fullscreen="true">
            <h1>底部文本</h1>
          </div>
        </div> 
        
        
         <div data-role="page" id="class-page">  
  
            <div data-role="content">  
                <ul data-role="listview" id="listview2">  
                    <li>向右滑动切换页面</li>  
                    <li>向右滑动切换页面</li>  
                    <li>向右滑动切换页面</li>  
                </ul>  
            </div>  
  
        </div>  
    </body>

</html>